iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0

菜菜菜的 Vue 30天 - Day7

event

我們在前一章的最後面有提到了 v-on ,那這個是什麼呢?!

其實它就 Vue 的事件(event)處理,就像是 Javascript 裡的 onclickonchangeoninput...等事件。

相信已經開始學 Vue 的各位應該對 Javascript 有一定的瞭解了,對這些事件應該不陌生。

好的!!那我們不囉唆就直接來看看怎麼運用~

計數器

就來做一個計數器好了,雖然老套但是拿來示範最好了哈哈哈!!!

我們就寫一個 button 並且綁上一個 v-on:click 事件,並且指定執行 data 裡的 count + 1

<body>
    <div id="app">
        <button v-on:click="count += 1">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
            count: 0
      }
    })
</script>	

結果就會是這樣:

是不是使用起來就跟 Javascript 原生的差不多呢~

另外 v-on 也能夠縮寫為 @,所以剛剛上面的 button 也能夠寫成

<button @click="count += 1">add</button>

我們來對前幾章的示範來做一點變化~

當我點擊按鈕的時候,皮卡丘的圖會變換:

<body>
    <div id="app">
        <button @click="count += 1">change img</button></br>
        <img :src=`./皮卡丘${count%2}.jpg` alt="img">
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
</script>	

當然其他的 on 事件也能夠使用,例如:

使用 onmouseover 事件來改變 div 的顏色。

<body>
    <div id="app">
        <div class="block" @mouseover="blockRed = !blockRed" :class="{blockRed: blockRed}"></div>
    </div>	
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
            blockRed: false
      }
    })
</script>

結果如下:

一般我們在 v-on 事件裡面會放的是一個 function 在 Vue 裡面會使用一個叫做 methods 的方法,在裡面宣告 function ,接下來會在下一章做介紹。


上一篇
v-model
下一篇
methods
系列文
菜菜菜的 Vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kkdayy_55330
iT邦新手 5 級 ‧ 2019-03-05 21:03:43

嗨,Andy老師

可以參考這系列的codepen或github嗎

Andy Tsai iT邦新手 5 級 ‧ 2019-07-11 15:32:23 檢舉

我沒有留 code 耶XDD
都是直接打上去的

我要留言

立即登入留言